<?php
/**
 * 3-4岁认知专区内容
 */

if (!defined('ROOT_PATH')) {
    die('直接访问被禁止');
}

// 设置页面标题
set_page_title('3-4岁认知训练');

// 页面特定样式
$page_styles = <<<HTML
<style>
    /* 3-4岁认知专区特定样式 */
    body {
        background-color: #fff5f2;
        font-family: 'Comic Sans MS', 'Marker Felt', 'Arial Rounded MT Bold', sans-serif;
    }
    
    .navbar {
        background: linear-gradient(to right, #ff9e80, #ffcc80);
        border-radius: 0 0 20px 20px;
    }
    
    .cognitive-header {
        text-align: center;
        padding: 40px 0;
        margin-bottom: 30px;
        background-color: #fff;
        border-radius: 15px;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
        border: 6px solid #ffe0b2;
    }
    
    .cognitive-title {
        font-size: 2.5rem;
        font-weight: bold;
        color: #ff7043;
        margin-bottom: 15px;
    }
    
    .cognitive-subtitle {
        font-size: 1.2rem;
        color: #666;
        max-width: 800px;
        margin: 0 auto 20px;
    }
    
    .topics-container {
        margin-bottom: 40px;
    }
    
    .topic-card {
        background-color: white;
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
        transition: all 0.3s ease;
        height: 100%;
        margin-bottom: 30px;
        border: 5px solid;
    }
    
    .topic-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
    }
    
    .topic-card.colors {
        border-color: #ffcdd2;
    }
    
    .topic-card.shapes {
        border-color: #c8e6c9;
    }
    
    .topic-card.numbers {
        border-color: #bbdefb;
    }
    
    .topic-card.animals {
        border-color: #fff9c4;
    }
    
    .topic-card.plants {
        border-color: #dcedc8;
    }
    
    .topic-card.objects {
        border-color: #d1c4e9;
    }
    
    .topic-image {
        width: 100%;
        height: 200px;
        object-fit: cover;
    }
    
    .topic-body {
        padding: 20px;
        text-align: center;
    }
    
    .topic-title {
        font-size: 1.5rem;
        font-weight: bold;
        margin-bottom: 10px;
    }
    
    .topic-description {
        color: #666;
        margin-bottom: 20px;
    }
    
    .btn-topic {
        padding: 10px 25px;
        border-radius: 50px;
        font-weight: bold;
        transition: all 0.3s ease;
    }
    
    .btn-topic:hover {
        transform: translateY(-3px);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }
    
    .btn-colors {
        background-color: #e57373;
        color: white;
    }
    
    .btn-shapes {
        background-color: #81c784;
        color: white;
    }
    
    .btn-numbers {
        background-color: #64b5f6;
        color: white;
    }
    
    .btn-animals {
        background-color: #ffd54f;
        color: white;
    }
    
    .btn-plants {
        background-color: #aed581;
        color: white;
    }
    
    .btn-objects {
        background-color: #9575cd;
        color: white;
    }
    
    .parent-info {
        background-color: #fff;
        border-radius: 15px;
        padding: 30px;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
        margin-top: 20px;
        margin-bottom: 40px;
    }
    
    .parent-info-title {
        font-size: 1.8rem;
        font-weight: bold;
        color: #ff7043;
        margin-bottom: 20px;
        text-align: center;
    }
    
    .parent-tips-list {
        margin-bottom: 0;
    }
    
    .parent-tips-list li {
        margin-bottom: 15px;
        position: relative;
        padding-left: 30px;
    }
    
    .parent-tips-list li:before {
        content: "👉";
        position: absolute;
        left: 0;
        top: 0;
    }
</style>
HTML;
?>

<!-- 主内容区 -->
<div class="container mt-4">
    <!-- 认知专区标题 -->
    <div class="cognitive-header">
        <h1 class="cognitive-title">3-4岁认知启蒙</h1>
        <p class="cognitive-subtitle">通过生动有趣的互动方式，帮助孩子认识世界，建立基础认知能力。这是孩子思维发展的重要基石！</p>
        <img src="<?php echo asset_url('images/cognitive-banner.jpg'); ?>" alt="认知启蒙" class="img-fluid rounded" style="max-height: 300px; margin-bottom: 20px;">
    </div>
    
    <!-- 认知主题 -->
    <div class="topics-container">
        <h2 class="section-title text-center mb-4">认知主题</h2>
        
        <div class="row">
            <!-- 颜色认知 -->
            <div class="col-md-4 mb-4">
                <div class="topic-card colors">
                    <img src="<?php echo asset_url('images/colors-topic.jpg'); ?>" alt="颜色认知" class="topic-image">
                    <div class="topic-body">
                        <h3 class="topic-title">颜色认知</h3>
                        <p class="topic-description">认识基本颜色，学习区分和命名不同的颜色，培养色彩感知能力。</p>
                        <a href="<?php echo page_url('age-3-4-colors'); ?>" class="btn btn-topic btn-colors">开始学习</a>
                    </div>
                </div>
            </div>
            
            <!-- 形状认知 -->
            <div class="col-md-4 mb-4">
                <div class="topic-card shapes">
                    <img src="<?php echo asset_url('images/shapes-topic.jpg'); ?>" alt="形状认知" class="topic-image">
                    <div class="topic-body">
                        <h3 class="topic-title">形状认知</h3>
                        <p class="topic-description">了解基本几何形状，学习识别日常生活中的各种形状。</p>
                        <a href="<?php echo page_url('age-3-4-shapes'); ?>" class="btn btn-topic btn-shapes">开始学习</a>
                    </div>
                </div>
            </div>
            
            <!-- 数字认知 -->
            <div class="col-md-4 mb-4">
                <div class="topic-card numbers">
                    <img src="<?php echo asset_url('images/numbers-topic.jpg'); ?>" alt="数字认知" class="topic-image">
                    <div class="topic-body">
                        <h3 class="topic-title">数字认知</h3>
                        <p class="topic-description">认识基础数字，学习简单计数，建立初步的数量概念。</p>
                        <a href="<?php echo page_url('age-3-4-numbers'); ?>" class="btn btn-topic btn-numbers">开始学习</a>
                    </div>
                </div>
            </div>
            
            <!-- 动物认知 -->
            <div class="col-md-4 mb-4">
                <div class="topic-card animals">
                    <img src="<?php echo asset_url('images/animals-topic.jpg'); ?>" alt="动物认知" class="topic-image">
                    <div class="topic-body">
                        <h3 class="topic-title">动物认知</h3>
                        <p class="topic-description">了解常见动物，学习它们的名称、特征和声音。</p>
                        <a href="<?php echo page_url('age-3-4-animals'); ?>" class="btn btn-topic btn-animals">开始学习</a>
                    </div>
                </div>
            </div>
            
            <!-- 植物认知 -->
            <div class="col-md-4 mb-4">
                <div class="topic-card plants">
                    <img src="<?php echo asset_url('images/plants-topic.jpg'); ?>" alt="植物认知" class="topic-image">
                    <div class="topic-body">
                        <h3 class="topic-title">植物认知</h3>
                        <p class="topic-description">认识常见植物，了解植物的基本部分和生长过程。</p>
                        <a href="<?php echo page_url('age-3-4-plants'); ?>" class="btn btn-topic btn-plants">开始学习</a>
                    </div>
                </div>
            </div>
            
            <!-- 物品认知 -->
            <div class="col-md-4 mb-4">
                <div class="topic-card objects">
                    <img src="<?php echo asset_url('images/objects-topic.jpg'); ?>" alt="物品认知" class="topic-image">
                    <div class="topic-body">
                        <h3 class="topic-title">物品认知</h3>
                        <p class="topic-description">认识日常生活中的常见物品及其用途。</p>
                        <a href="<?php echo page_url('age-3-4-objects'); ?>" class="btn btn-topic btn-objects">开始学习</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 家长指导区 -->
    <div class="parent-info">
        <h2 class="parent-info-title">家长指导建议</h2>
        
        <ul class="parent-tips-list">
            <li><strong>日常融入：</strong>在日常生活中随时随地进行认知教育，如外出时指认颜色、形状和物体。</li>
            <li><strong>互动学习：</strong>通过游戏和互动方式让孩子学习，避免单向灌输知识。</li>
            <li><strong>重复强化：</strong>多次重复是3-4岁孩子学习的重要方式，耐心重复可以加深记忆。</li>
            <li><strong>鼓励表达：</strong>鼓励孩子用语言表达所学内容，提问并耐心倾听回答。</li>
            <li><strong>多感官体验：</strong>结合视觉、听觉、触觉等多种感官进行学习，效果更佳。</li>
            <li><strong>情境教学：</strong>在具体情境中进行认知教育，如购物时认识水果、蔬菜等。</li>
            <li><strong>适当难度：</strong>根据孩子的接受能力调整学习内容难度，循序渐进。</li>
        </ul>
    </div>
</div> 